<template>
  <div class="yi scrollbar scroll-hover h-100p w-100p">
    <!-- or to manually control the datasynchronization（或者手动控制数据流，需要像这样手动监听changed事件） -->
    <codemirror
      ref="myCm"
      :value="result"
      :options="cmOptions"
      @ready="onCmReady"
      @focus="onCmFocus"
      @input="onCmCodeChange"
    >
    </codemirror>
  </div>
</template>

<script>
import { codemirror } from "vue-codemirror";
// language js
import "codemirror/mode/javascript/javascript.js";
// theme css
import "codemirror/theme/base16-dark.css";
// more codemirror resources
// import 'codemirror/some-resource...'

// 折叠代码
import 'codemirror/addon/fold/foldgutter.css'
import 'codemirror/addon/fold/foldcode.js'
import 'codemirror/addon/fold/foldgutter.js'
import 'codemirror/addon/fold/xml-fold.js'
import 'codemirror/addon/fold/indent-fold.js'
import 'codemirror/addon/fold/brace-fold'
import 'codemirror/addon/fold/markdown-fold.js'
export default {
  components: {
    codemirror,
  },
  // model: {
  //   prop: 'modelValue',
  //   event: 'input'
  // },
  props:{
    value:{
      type:String,
      default () {
        return ''
      }
    }
  },
  data() {
    return {
      // code: '',
      cmOptions: {
        // codemirror options
        tabSize: 4,
        mode: "text/javascript",
        theme: "base16-dark",
        lineNumbers: true,
        line: true,
        smartIndent: true,
        indentWithTabs: true,
        lineWrapping: true,
        foldGutter: true,
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
        // more codemirror options, 更多 codemirror 的高级配置...
      },
    };
  },
  methods: {
    onCmReady(cm) {
      // console.log('the editor is readied!', cm)
    },
    onCmFocus(cm) {
      // console.log('the editor is focus!', cm)
    },
    onCmCodeChange(newCode) {
      // console.log('this is new code', newCode)
      this.result = newCode

    },
  },
  computed: {
    codemirror() {
      return this.$refs.myCm.codemirror;
    },
    result: {
      get() {
        return this.value;
      },
      set(v) {
        this.$emit('input',v)
      },
    },
  },
  mounted() {
    // console.log('this is current codemirror object', this.codemirror)
    // you can use this.codemirror to do something...
  },
};
</script>
<style lang="scss">
.vue-codemirror {
  .CodeMirror {
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier,
      monospace;
    background-color: #fff;
    border-radius: 4px;
    height: 100%;
    line-height: 24px;
    .CodeMirror-vscrollbar {
      &::-webkit-scrollbar {
        width: 3px;
        height: 4px;
      }
      &::-webkit-scrollbar-track {
        border-radius: 10px;
        background-color: rgba(0, 0, 0, 0.1);
      }
      &::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.25);
        border-radius: 10px;
      }
    }

    span {
      &.cm-string {
        &.cm-property {
          color: #005cc5;
        }
      }

      &.cm-number {
        color: #005cc5;
      }

      &.cm-atom {
        color: #905;
      }

      &.cm-string {
        color: #690;
      }

      &.cm-tag {
        color: #3182bd;
      }

      &.cm-attribute {
        color: #6f42c1;
      }

      &.cm-comment {
        color: #6a737d;
      }

      &.cm-variable {
        color: #3182bd;
      }
      &.cm-error {
        background-color: inherit !important;
      }
    }

    .CodeMirror-gutters {
      background-color: #fff;
    }

    &.CodeMirror-wrap pre.CodeMirror-line,
    &.CodeMirror-wrap pre.CodeMirror-line-like {
      word-wrap: break-word;
      white-space: pre-wrap;
      word-break: break-word;
    }
  }
}
</style>
